<template>
	<el-row class="slider-container">
		<div class="slider-way" ref="way"></div>
		<div class="slider el-icon-d-arrow-right slider-default" @mousedown="down"></div>
	</el-row>
</template>
<script>
	export default {
        data(){
            return {
                pass:false
            }
        },
		methods: {
			down(event) {
				let dom = event.target;
				let parent = dom.parentElement;
				let x = event.x;
                let way = this.$refs['way']
                let that = this
				const move = (e) => {
                    that.notSelectLetter(dom);
                    let offsetX = e.x - x;
                    let width = parent.offsetWidth - 60;
                    //console.log(offsetX + " "+ width)
                    if (offsetX < width){
                        dom.style.left = offsetX + 'px'
                        way.style.width = (offsetX + 20) + 'px'
                    }
                    if(offsetX >= width){
                        dom.style.left = width + 'px'
                        way.style.width = (width + 20) + 'px'
                    }
                    way.classList.add("slider-way-move")
				}
				const up = (e) => {
                    let offsetX = e.x - x;
                    let width = parent.offsetWidth - 60;
                    way.classList.remove("slider-way-move")
                    dom.classList.remove("el-icon-d-arrow-right")
                    if (offsetX >= width){
						way.classList.add("slider-way-success")
                        dom.classList.add("el-icon-check")
                        that.pass = true
                    }else{
                        dom.classList.add("el-icon-close")
                        way.classList.add("slider-way-fail")
                        dom.classList.remove("slider-default")
                        dom.classList.add("slider-fail")
                        that.pass = false        
                    }
                    let pass = this.pass
                    that.$emit("passed", pass)
                    document.removeEventListener("mousemove",move)
					document.removeEventListener("mouseup",up)
				}
				document.addEventListener("mousemove", move)
				document.addEventListener("mouseup", up)
			},
			notSelectLetter(dom) {
				if (typeof(dom.onselectstart) != "undefined") {
					// IE下禁止元素被选取        
					dom.onselectstart = new Function("return false");
				} else {
					// firefox下禁止元素被选取的变通办法        
					dom.onmousedown = new Function("return false");
					dom.onmouseup = new Function("return true");
				}
			}


		}
	}
</script>
<style>
	.slider-container {
		border: 1px solid #DCDFE6;
		text-align: left;
		position: relative;
		height: 41px;
	}

	.slider {
		
		width: 40px;
		height: 40px;
		border-radius: 1px;
		line-height: 40px;
		font-size: 24px;
		color: #fff;
		position: absolute;
		margin: 0 0 0 20px;
		text-align: center;
	}
	
	.slider-default{
		background-color: #52CDBD;
	}
	.slider-fail{
		background-color: #F57A7A;
	}

	.slider-way {
		height: 40px;
		width: 20px;
		position: absolute;
	}
    .slider-way-move{
        background-color: rgb(216,229,255);
        border:solid 0.1px rgb(132,170,254);
        box-sizing: border-box;
    }
    .slider-way-success{
        background-color:#D2F4EF;
        border:solid 0.1px #52CCBA;
        box-sizing: border-box;
		color: #2ABF81;
    }
     .slider-way-fail{
        background-color:  rgb(252,225,225);
        border:solid 0.1px #F57A7A;
        box-sizing: border-box;
    }
</style>
